<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		ul,
		li {
			list-style: none;
		}

		img {
			display: block;
			/*vertical-align: middle;*/
		}


		.clearFix:after {
			content: '';
			display: table;
			clear: both;
		}

		#box {
			position: relative;
			width: 600px;
			height: 300px;
			margin: 50px auto;
			overflow: hidden;
		}

		#box .list {
			position: absolute;
			left: -600px;
			width: 4200px;
			height: 300px;
		}

		#box .list li {
			float: left;
			width: 600px;
			height: 300px;
		}

		#box .list li img {
			width: 600px;
			height: 300px;
		}


		#box span {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 50px;
			height: 100px;
			background-color: rgba(200, 200, 200, .7);
			font-size: 50px;
			text-align: center;
			line-height: 100px;
			color: white;
			opacity: 0;
			transition: opacity 2s;
		}

		#box .left {
			left: 0;
		}

		#box .right {
			right: 0;
		}

		#box .iconList {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10px;
			overflow: hidden;
		}

		#box .iconList li {
			float: left;
			width: 40px;
			height: 40px;
			margin-right: 10px;
			border-radius: 50%;
			background-color: gray;
		}

		#box .iconList li.current {
			background-color: red;
		}
	</style>
</head>

<body>
	<div id="box">
		<ul class="list">
			<li><img src="img/5.jpg" /></li>
			<li><img src="img/1.jpg" /></li>
			<li><img src="img/2.jpg" /></li>
			<li><img src="img/3.jpg" /></li>
			<li><img src="img/4.jpg" /></li>
			<li><img src="img/5.jpg" /></li>
			<li><img src="img/1.jpg" /></li>
		</ul>

		<span class="left">
			< </span>
				<span class="right"> > </span>


				<ul class="iconList">
					<li class="current"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
	</div>

	<script type="text/javascript">
		var box = document.querySelector('#box');

		var span_list = document.querySelectorAll('span');

		var auto_play_timer = null;

		function auto_play() {
			auto_play_timer = setInterval(function () {
				move(true);
			}, 2000);
		}

		auto_play();

		box.onmouseover = function () {
			span_list[0].style.opacity = .8;
			span_list[1].style.opacity = .8;
			clearInterval(auto_play_timer);
		}

		box.onmouseout = function () {
			span_list[0].style.opacity = 0;
			span_list[1].style.opacity = 0;
			auto_play();
		}

		// 需求：
		// var list = document.querySelector('.list');

		// function move(flag){
		// 	var startX = list.offsetLeft;
		// 	var step;
		// 	if(flag){
		// 		step = -600;
		// 	}else{
		// 		step = 600;
		// 	}
		// 	var endX = startX + step;
		// 	list.style.left = endX + 'px';
		// }

		// （1）右侧瞬变
		// span_list[1].onclick = function(){
		// var startX = list.offsetLeft;
		// var step = -600;
		// var endX = startX + step;
		// list.style.left = endX + 'px';
		// move(true);
		// }

		// （2）左侧瞬变
		// span_list[0].onclick = function(){
		// var startX = list.offsetLeft;
		// var step = 600;
		// var endX = startX + step;
		// list.style.left = endX + 'px';
		// 	move(false)
		// }
		// （3）瞬变的封装


		var list = document.querySelector('.list');
		// （4）右侧渐变

		span_list[1].onclick = function () {

			// var startX = list.offsetLeft;
			// var move_dis = -600;
			// var lastX = startX + move_dis;


			// var timer = setInterval(function () {
			// 	var startX = list.offsetLeft;
			// 	var step = -30;
			// 	var endX = startX + step;

			// 	if(endX == lastX){
			// 		clearInterval(timer)
			// 	}

			// 	list.style.left = endX + 'px';
			// }, 30);

			move(true);
		}



		// （5）左侧渐变
		span_list[0].onclick = function () {
			// var startX = list.offsetLeft;
			// var move_dis = 600;
			// var lastX = startX + move_dis;


			// var timer = setInterval(function(){
			// 	var startX = list.offsetLeft;
			// 	var step = 30;
			// 	var endX = startX + step;

			// 	if(endX == lastX){
			// 		clearInterval(timer)
			// 	}

			// 	list.style.left = endX + 'px';

			// },30)
			move(false);
		}
		// （6）渐变的封装


		// ***move_dis是移动的距离 也就是我给多少就移动多少

		// 找到小圆点的下标  然后 + 1得到图片的下标
		// 图片的下标 乘以 -600 得到即将移动到的图片的偏移量
		// 这个偏移量减去  之前的图片的最初位置的偏移量的差值就是移动的距离

		var icon_list = document.querySelectorAll('.iconList li');

		for (var i = 0; i < icon_list.length; i++) {
			icon_list[i].index = i;
			icon_list[i].onclick = function () {
				// this.index + 1 图片的下标
				// (this.index + 1) * -600 图片移动之后的偏移量
				move((this.index + 1) * -600);
			}
		}


		var isMove = false;

		function move(flag) {

			if(isMove){
				return;
			}

			isMove = true;

			// 每一张图片移动完的时间 / 一步移动的时间 =  步数
			// 距离 / 步数 = 步长
			var startX = list.offsetLeft;
			var move_dis;

			if (typeof flag == 'boolean') {
				if (flag) {
					move_dis = -600;
				} else {
					move_dis = 600;
				}
			} else {
				// flag : 移动之后图片的偏移量
				move_dis = flag - startX;
			}

			var lastX = startX + move_dis;
			// 每一张图片移动完的时间 / 一步移动的时间 =  步数
			// 距离 / 步数 = 步长

			// 一张图片移动完毕的时间
			var allTime = 600;
			// 一步移动的时间
			var stepTime = 30;

			// 一张图片移动的步数
			var stepNum = allTime / stepTime;

			var timer = setInterval(function () {
				var startX = list.offsetLeft;
				var step = move_dis / stepNum;
				var endX = startX + step;

				if (lastX == endX) {
					clearInterval(timer);

					if (endX == -3600) {
						endX = -600;
					} else if (endX == 0) {
						endX = -3000;
					}
					isMove = false;
				}

				list.style.left = endX + 'px';
				
			}, stepTime);

			// 图片的偏移量是点击想左 或者 向右之后的图片的偏移量
			// 图片的偏移量 / -600 得到图片的下标
			// 图片的下标 - 1 得到小圆点的下标
			// 通过小圆点的下标  就可以将小圆点加样式

			for (var i = 0; i < icon_list.length; i++) {
				icon_list[i].className = '';
			}


			var index = lastX / -600 - 1;

			if (index > 4) {
				index = 0;
			} else if (index < 0) {
				index = 4;
			}

			icon_list[index].className = 'current';
		}
		// （7）无限轮播
		// （8）图片联动小圆点
		// （9）小圆点联动图片
		// （10）自动轮播


		


			// （11）移入悬停 移出继续
			// （12）定时器叠加
	</script>
</body>

</html>